<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.0"><link rel="apple-touch-icon" sizes="180x180" href="/images/avatar32.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/avatar32.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/avatar32.png"><link rel="mask-icon" href="/images/avatar.ico" color="#222"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="//fonts.loli.net/css?family=EB Garamond:300,300italic,400,400italic,700,700italic|Cinzel Decorative:300,300italic,400,400italic,700,700italic|Source Code Pro:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css"><script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script><script id="hexo-configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Muse",version:"7.8.0",exturl:!1,sidebar:{position:"right",width:200,display:"post",padding:18,offset:12,onmobile:!1},copycode:{enable:!0,show_result:!1,style:"default"},back2top:{enable:!0,sidebar:!0,scrollpercent:!0},bookmark:{enable:!1,color:"#222",save:"auto"},fancybox:!1,mediumzoom:!0,lazyload:!1,pangu:!1,algolia:{appID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}},localsearch:{enable:!0,trigger:"auto",top_n_per_article:1,unescape:!1,preload:!1},path:"search.xml",motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideRightIn"}},sidebarPadding:40}</script><script data-ad-client="ca-pub-1414767122267457" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><meta name="description" content="字体图标依赖文件1234bootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.eotbootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.svgbootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.ttfbootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.wof"><meta property="og:type" content="article"><meta property="og:title" content="5, 布局组件"><meta property="og:url" content="http://yoursite.com/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/Bootstrap%E6%95%99%E7%A8%8B%E7%AC%94%E8%AE%B0/5-%E5%B8%83%E5%B1%80%E7%BB%84%E4%BB%B6/index.html"><meta property="og:site_name" content="人间且慢行"><meta property="og:description" content="字体图标依赖文件1234bootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.eotbootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.svgbootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.ttfbootstrap&#x2F;fonts&#x2F;glyphicons-halfings-regular.wof"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7gy1g129o4k0a5j30m9024jr8.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g13hf9wdgxj309t01w742.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g13im9sz3rj305006tjrk.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g13iiditacj30cf05fjrc.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g16s0pz7x5j308g03emx1.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g16s3u7mz0j305d05yglh.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g16vgef9jcj306504d3ye.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g16wuoogpgj309904ba9w.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g16xbpu530j307o0350si.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g17widjsvoj306u02aa9v.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g17wjbvbwlj306t02bglg.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g180v4nyvlj30aw031jr9.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g17x4cb7enj309m01at8i.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g17x76rx5qj30bo05jwec.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g17xenlmjxj30cg01at8j.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g17xnkfrskj30bw04ajrb.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g18581tr2yj309g01ldfm.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7gy1g185ytfernj30al03ljr7.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g185v5j8eoj30dj017mwy.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g1869mf6pij30d801p3ya.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g187cj3w3yj30gq01z3ye.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g187cvni9hj30gh068q2w.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g190svqisoj30e201fq2p.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g190shreagj30e303aweb.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g1914rtckcj30j6016wee.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g1918cg271j30f001d74a.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7gy1g192gwoiqgj30fc02fdfs.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g1f4jv8hv6j30ay01dwe9.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7ly1g1f4rgyo9xj307e01mq2p.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7gy1g1f50p82rkj30ch014a9v.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/large/005zbIM7gy1g1f54z6ymmj30c001z0sp.jpg"><meta property="og:image" content="http://tva3.sinaimg.cn/mw690/005zbIM7ly1g1g9mqirimj306y05qq2x.jpg"><meta property="article:published_time" content="2019-03-13T16:00:00.000Z"><meta property="article:modified_time" content="2019-03-25T16:00:00.000Z"><meta property="article:author" content="我的名字"><meta property="article:tag" content="Web"><meta property="article:tag" content="Bootstrap"><meta property="article:tag" content="W3School"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="http://tva3.sinaimg.cn/large/005zbIM7gy1g129o4k0a5j30m9024jr8.jpg"><link rel="canonical" href="http://yoursite.com/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/Bootstrap%E6%95%99%E7%A8%8B%E7%AC%94%E8%AE%B0/5-%E5%B8%83%E5%B1%80%E7%BB%84%E4%BB%B6/"><script id="page-configurations">CONFIG.page={sidebar:"",isHome:!1,isPost:!0,lang:"zh-CN"}</script><link href="https://fonts.loli.net/css?family=Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet"><link href="https://fonts.loli.net/css?family=EB+Garamond:400,500,700&display=swap" rel="stylesheet"><link href="https://fonts.loli.net/css?family=Cinzel+Decorative&display=swap" rel="stylesheet"><link href="https://fonts.loli.net/css?family=Source+Code+Pro&display=swap" rel="stylesheet"><title>5, 布局组件 | 人间且慢行</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-168149316-1"></script><script data-pjax>function gtag(){dataLayer.push(arguments)}CONFIG.hostname===location.hostname&&(window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-168149316-1"))</script><noscript><style>.sidebar-inner,.use-motion .brand,.use-motion .collection-header,.use-motion .comments,.use-motion .menu-item,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{opacity:initial}.use-motion .site-subtitle,.use-motion .site-title{opacity:initial;top:initial}.use-motion .logo-line-before i{left:initial}.use-motion .logo-line-after i{right:initial}</style></noscript></head><body itemscope itemtype="http://schema.org/WebPage"><div class="container use-motion"><div class="headband"></div><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏"><span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span></div></div><div class="site-meta"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span><h1 class="site-title">人间且慢行</h1><span class="logo-line-after"><i></i></span></a></div><div class="site-nav-right"><div class="toggle popup-trigger"><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a></li><li class="menu-item menu-item-search"><a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索</a></li></ul></nav><div class="search-pop-overlay"><div class="popup search-popup"><div class="search-header"><span class="search-icon"><i class="fa fa-search"></i></span><div class="search-input-container"><input autocomplete="off" autocapitalize="off" placeholder="搜索..." spellcheck="false" type="search" class="search-input"></div><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span></div><div id="search-result"><div id="no-result"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div></div></div></div></header><a href="https://github.com/linxiaoki" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg style="fill:#008b8b" width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><main class="main"><div class="main-inner"><div class="content-wrap"><div class="content post posts-expand"><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="http://yoursite.com/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/Bootstrap%E6%95%99%E7%A8%8B%E7%AC%94%E8%AE%B0/5-%E5%B8%83%E5%B1%80%E7%BB%84%E4%BB%B6/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.gif"><meta itemprop="name" content="我的名字"><meta itemprop="description" content="一起滚月球吧·"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="人间且慢行"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">5, 布局组件</h1><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2019/03/14 00:00:00" itemprop="dateCreated datePublished" datetime="2019-03-14T00:00:00+08:00">2019/03/14</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2019/03/26 00:00:00" itemprop="dateModified" datetime="2019-03-26T00:00:00+08:00">2019/03/26</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text"></span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/" itemprop="url" rel="index"><span itemprop="name">有道云笔记-搬</span></a> </span>, <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/Bootstrap%E6%95%99%E7%A8%8B%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">Bootstrap教程笔记</span></a></span></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>10k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span>9 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><h4 id="字体图标"><a href="#字体图标" class="headerlink" title="字体图标"></a>字体图标</h4><h5 id="依赖文件"><a href="#依赖文件" class="headerlink" title="依赖文件"></a>依赖文件</h5><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bootstrap<span class="regexp">/fonts/g</span>lyphicons-halfings-regular.eot</span><br><span class="line">bootstrap<span class="regexp">/fonts/g</span>lyphicons-halfings-regular.svg</span><br><span class="line">bootstrap<span class="regexp">/fonts/g</span>lyphicons-halfings-regular.ttf</span><br><span class="line">bootstrap<span class="regexp">/fonts/g</span>lyphicons-halfings-regular.woff</span><br></pre></td></tr></table></figure><h5 id="字体图标列表"><a href="#字体图标列表" class="headerlink" title="字体图标列表"></a>字体图标列表</h5><p><a target="_blank" rel="noopener" href="http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm">点击这里，查看可用的字体图标列表</a></p><h5 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;glyphicon glyphicon-search&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure><span id="more"></span><h5 id="实例-带字体图标的导航栏"><a href="#实例-带字体图标的导航栏" class="headerlink" title="实例-带字体图标的导航栏"></a>实例-带字体图标的导航栏</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">css  js</span><br><span class="line"></span><br><span class="line">&lt;!--<span class="selector-attr">[if lt IE 9]</span>&gt;</span><br><span class="line">	&lt;script <span class="attribute">src</span>=<span class="string">&quot;https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">&lt;!<span class="selector-attr">[endif]</span>--&gt;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.navbar</span><span class="selector-class">.navbar-fixed-top</span><span class="selector-class">.navbar-inverse</span><span class="selector-attr">[role=navigation]</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.container</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.navbar-header</span></span><br><span class="line">            <span class="selector-tag">button</span><span class="selector-class">.navbar-toggle</span><span class="selector-attr">[type=button]</span><span class="selector-attr">[data-toggle=collapse]</span><span class="selector-attr">[data-target=.navbar-collapse]</span></span><br><span class="line">                <span class="selector-tag">span</span>.sr-only&#123;Toggle navigation&#125;</span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">                span-<span class="attribute">icon</span>-bar</span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-class">.navbar-brand</span><span class="selector-attr">[href=#]</span>&#123;Project name&#125;</span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.collapse</span><span class="selector-class">.navbar-collapse</span></span><br><span class="line">            <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.navbar-nav</span></span><br><span class="line">                <span class="selector-tag">li</span>.active&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span></span><br><span class="line">                    <span class="selector-tag">span</span><span class="selector-class">.glyphicon</span>.glyphicon-home^&#123;Home&#125;</span><br><span class="line">                li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#shop]</span></span><br><span class="line">                    <span class="selector-tag">span</span><span class="selector-class">.glyphicon</span>.glyphicon-shopping-cart^&#123;Shop&#125;</span><br><span class="line">                li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#support]</span></span><br><span class="line">                    <span class="selector-tag">span</span><span class="selector-class">.glyphicon</span>.glyphicon-hradphones^&#123;Support&#125;</span><br><span class="line">                </span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7gy1g129o4k0a5j30m9024jr8.jpg" alt="img"> <img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g13hf9wdgxj309t01w742.jpg" alt="img"> --- #### 下拉菜单<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.dropdown</span></span><br><span class="line">    button<span class="selector-id">#dropdownMenu1</span><span class="selector-class">.btn</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">        &#123;主题&#125;</span><br><span class="line">        <span class="selector-tag">span</span><span class="selector-class">.caret</span></span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span></span><br><span class="line">        <span class="selector-tag">li</span>.dropdon-header&#123;下拉菜单标题&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[tabindex=-1]</span><span class="selector-attr">[href=#]</span></span><br><span class="line">            &#123;Java&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[tabindex=-1]</span><span class="selector-attr">[href=#]</span></span><br><span class="line">            &#123;数据挖掘&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[tbaindex=-1]</span><span class="selector-attr">[href=#]</span></span><br><span class="line">            &#123;数据通信/网络&#125;</span><br><span class="line">        <span class="selector-tag">li</span><span class="selector-class">.divider</span></span><br><span class="line">        <span class="selector-tag">li</span>.diveider&#123;下拉菜单标题&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[tabindex=-1]</span><span class="selector-attr">[href=#]</span>分离的链接</span><br><span class="line">-------</span><br><span class="line">可添加标题：li&gt;dropdown-<span class="selector-tag">header</span> </span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g13im9sz3rj305006tjrk.jpg" alt="img"><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.dropdown</span></span><br><span class="line">    button<span class="selector-id">#dropdownMenu1</span><span class="selector-class">.btn</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">        ...</span><br><span class="line">        ...</span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span><span class="selector-class">.pull-right</span></span><br><span class="line">        li&gt;<span class="selector-tag">a</span></span><br><span class="line">        li&gt;<span class="selector-tag">a</span>...</span><br><span class="line">---------------</span><br><span class="line"> 向右对齐下拉菜单：<span class="selector-tag">ul</span>.pull-<span class="attribute">right</span></span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g13iiditacj30cf05fjrc.jpg" alt="img"><h4 id="按钮组"><a href="#按钮组" class="headerlink" title="按钮组"></a>按钮组</h4><figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">btn-toolbar &gt; btn-<span class="keyword">group</span> &gt; btn btn-<span class="literal">default</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#通过按钮组调整组内按钮大小</span></span><br><span class="line">.btn-<span class="keyword">group</span>.btn-<span class="keyword">group</span>-lg</span><br></pre></td></tr></table></figure><h5 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btn-group</span></span><br><span class="line">    <span class="selector-tag">button</span><span class="selector-class">.btn</span>.btn-default&#123;按钮<span class="number">1</span>&#125;</span><br><span class="line">    <span class="selector-tag">button</span><span class="selector-class">.btn</span>.btn-default&#123;按钮<span class="number">2</span>&#125;</span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.btn-group</span></span><br><span class="line">        <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">            &#123;下拉&#125;</span><br><span class="line">            <span class="selector-tag">span</span><span class="selector-class">.caret</span></span><br><span class="line">        <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span></span><br><span class="line">            li&gt;<span class="selector-tag">a</span><span class="selector-attr">[tabindex=-1]</span><span class="selector-attr">[href=#]</span>&#123;下拉链接<span class="number">1</span>&#125;</span><br><span class="line">            li&gt;<span class="selector-tag">a</span><span class="selector-attr">[tabindex=-1]</span><span class="selector-attr">[href=#]</span>&#123;下拉链接<span class="number">2</span>&#125;</span><br><span class="line">------------</span><br><span class="line">#垂直的按钮组</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btn-group-vertical</span></span><br><span class="line">    <span class="selector-tag">div</span>.btn-group-vertical</span><br></pre></td></tr></table></figure><p><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g16s0pz7x5j308g03emx1.jpg" alt="img"><br><br><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g16s3u7mz0j305d05yglh.jpg" alt="img"></p><h5 id="按钮插件-实现不同效果"><a href="#按钮插件-实现不同效果" class="headerlink" title="按钮插件-实现不同效果"></a>按钮插件-实现不同效果</h5><ol><li>加载状态 <code>data-loaing-text=&quot;Loading...&quot;</code><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">css js</span><br><span class="line">------------------</span><br><span class="line">button.btn.btn-primary[data-loading-text=Loading...][<span class="keyword">type</span>=button]&#123;加载状态&#125;</span><br><span class="line">script&gt;</span><br><span class="line">    $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      $(<span class="string">&quot;.btn&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="built_in">this</span>).button(<span class="string">&#x27;loading&#x27;</span>).delay(<span class="number">1000</span>).queue(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            $(<span class="built_in">this</span>).button(<span class="string">&#x27;reset&#x27;</span>);</span><br><span class="line">            $(<span class="built_in">this</span>).dequeue();</span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure></li><li>单个切换 <code>data-toggle=button</code><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span><span class="selector-attr">[type=button]</span><span class="selector-attr">[data-toggle=button]</span>&#123;单个切换&#125;</span><br></pre></td></tr></table></figure></li><li>复选框 <code>data-toggle=buttons</code><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btn-group</span><span class="selector-attr">[data-toggle=buttons]</span></span><br><span class="line">    <span class="selector-tag">label</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span></span><br><span class="line">        <span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span></span><br><span class="line">        &#123;选项<span class="number">1</span>&#125;</span><br><span class="line">    <span class="selector-tag">label</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span></span><br><span class="line">        <span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span></span><br><span class="line">        &#123;选项<span class="number">2</span>&#125;</span><br><span class="line">    <span class="selector-tag">label</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span></span><br><span class="line">        <span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span></span><br><span class="line">        &#123;选项<span class="number">3</span>&#125;</span><br></pre></td></tr></table></figure></li><li>单选按钮 <code>data-toggle=buttons</code><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btn-group</span><span class="selector-attr">[data-toggle=buttons]</span></span><br><span class="line">    <span class="selector-tag">label</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span></span><br><span class="line">        <span class="selector-tag">input</span><span class="selector-attr">[type=radio]</span><span class="selector-attr">[name=options]</span><span class="selector-attr">[id=option1]</span></span><br><span class="line">        &#123;选项<span class="number">1</span>&#125;</span><br><span class="line">    <span class="selector-tag">label</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span></span><br><span class="line">        <span class="selector-tag">input</span><span class="selector-attr">[type=radio]</span><span class="selector-attr">[name=options]</span><span class="selector-attr">[id=option2]</span></span><br><span class="line">        &#123;选项<span class="number">2</span>&#125;</span><br></pre></td></tr></table></figure></li><li>折叠？ ```data-toggle=collapse</li></ol><p>*. 启用插件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tooggle   loading   reset  [string]  </span><br></pre></td></tr></table></figure><h4 id="按钮下拉菜单"><a href="#按钮下拉菜单" class="headerlink" title="按钮下拉菜单"></a>按钮下拉菜单</h4><h5 id="分割的按钮下拉菜单"><a href="#分割的按钮下拉菜单" class="headerlink" title="分割的按钮下拉菜单"></a>分割的按钮下拉菜单</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btn-group</span></span><br><span class="line">    <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span><span class="selector-attr">[type=button]</span>&#123;默认&#125;</span><br><span class="line">    <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-default</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[type=button]</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">        <span class="selector-tag">span</span><span class="selector-class">.caret</span></span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span></span><br><span class="line">        li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;功能&#125;</span><br><span class="line">        <span class="selector-tag">li</span><span class="selector-class">.divider</span></span><br><span class="line">        li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;分离的链接&#125;</span><br><span class="line">    </span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g16vgef9jcj306504d3ye.jpg" alt="img"> ##### 按钮下拉菜单大小<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-default</span><span class="selector-class">.btn-lg</span>.dropdown-toggle</span><br></pre></td></tr></table></figure><h5 id="按钮上拉菜单"><a href="#按钮上拉菜单" class="headerlink" title="按钮上拉菜单"></a>按钮上拉菜单</h5><figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">div</span>.btn-<span class="keyword">group</span>  ==&gt;&gt;  <span class="keyword">div</span>.btn-<span class="keyword">group</span>.dropup</span><br></pre></td></tr></table></figure><h4 id="输入框组"><a href="#输入框组" class="headerlink" title="输入框组"></a>输入框组</h4><p>扩展自<a target="_blank" rel="noopener" href="http://www.runoob.com/bootstrap/bootstrap-forms.html">表单控件</a>。</p><h5 id="基本的输入框组-前缀与后缀"><a href="#基本的输入框组-前缀与后缀" class="headerlink" title="基本的输入框组(前缀与后缀)"></a>基本的输入框组(前缀与后缀)</h5><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">div[style=padding:<span class="number">100</span>px <span class="number">100</span>px <span class="number">10</span>px;]</span><br><span class="line">    form</span><br><span class="line">        div.<span class="keyword">input</span>-<span class="keyword">group</span></span><br><span class="line">            span.<span class="keyword">input</span>-<span class="keyword">group</span>-addon&#123;@&#125;</span><br><span class="line">            <span class="keyword">input</span>.form-control[<span class="keyword">type</span>=<span class="type">text</span>][placeholder=twitterhandle]</span><br><span class="line">        &lt;br&gt;</span><br><span class="line">        div.<span class="keyword">input</span>-<span class="keyword">group</span></span><br><span class="line">            <span class="keyword">input</span>.form-control[<span class="keyword">type</span>=<span class="type">text</span>]</span><br><span class="line">            span.<span class="keyword">input</span>-<span class="keyword">group</span>-addon&#123;<span class="number">.00</span>&#125;</span><br><span class="line">        &lt;br&gt;</span><br><span class="line">        div.<span class="keyword">input</span>-<span class="keyword">group</span></span><br><span class="line">            span.<span class="keyword">input</span>-<span class="keyword">group</span>-addon&#123;$&#125;</span><br><span class="line">            <span class="keyword">input</span>.form-control[<span class="keyword">type</span>=<span class="type">text</span>]</span><br><span class="line">            span.<span class="keyword">input</span>-<span class="keyword">group</span>-addon&#123;<span class="number">.00</span>&#125;</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g16wuoogpgj309904ba9w.jpg" alt="img"><h5 id="输入框组大小"><a href="#输入框组大小" class="headerlink" title="输入框组大小"></a>输入框组大小</h5><figure class="highlight sas"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">form</span><br><span class="line">    div.<span class="meta">input</span>-<span class="meta">group</span>.<span class="meta">input</span>-<span class="meta">group</span>-lg</span><br><span class="line">        ...</span><br><span class="line">        ...</span><br></pre></td></tr></table></figure><h5 id="带有-复选框和单选插件-的输入组"><a href="#带有-复选框和单选插件-的输入组" class="headerlink" title="带有 复选框和单选插件 的输入组"></a>带有 复选框和单选插件 的输入组</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span></span><br><span class="line">    <span class="selector-tag">form</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.row</span></span><br><span class="line">            <span class="selector-tag">div</span><span class="selector-class">.input-group</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.input-group-addon</span></span><br><span class="line">                    <span class="selector-tag">input</span><span class="selector-attr">[type=chekbox]</span></span><br><span class="line">                <span class="selector-tag">input</span><span class="selector-class">.form-control</span><span class="selector-attr">[type=text]</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.row</span></span><br><span class="line">            <span class="selector-tag">div</span><span class="selector-class">.input-group</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.input-group-addon</span></span><br><span class="line">                    <span class="selector-tag">input</span><span class="selector-attr">[type=radon]</span></span><br><span class="line">                <span class="selector-tag">input</span><span class="selector-class">.form-control</span><span class="selector-attr">[type=text]</span></span><br><span class="line">------------------------</span><br><span class="line"><span class="selector-tag">div</span>.input-group&gt;<span class="selector-tag">span</span>.input-group-adddon</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g16xbpu530j307o0350si.jpg" alt="img"><h5 id="带有-按钮插件-的输入组"><a href="#带有-按钮插件-的输入组" class="headerlink" title="带有 按钮插件 的输入组"></a>带有 按钮插件 的输入组</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[style=padding:100px 100px 10px]</span></span><br><span class="line">    <span class="selector-tag">form</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.row</span></span><br><span class="line">            <span class="selector-tag">div</span><span class="selector-class">.input-group</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.input-group-btn</span></span><br><span class="line">                    <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-default</span><span class="selector-attr">[type=button]</span>&#123;Go&#125;</span><br><span class="line">                <span class="selector-tag">input</span><span class="selector-class">.form-control</span><span class="selector-attr">[type=text]</span></span><br><span class="line">--------------------</span><br><span class="line"><span class="selector-tag">div</span>.input-group&gt;<span class="selector-tag">span</span>.input-group-btn</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g17widjsvoj306u02aa9v.jpg" alt="img"><h5 id="带有-下拉菜单按钮-的输入组"><a href="#带有-下拉菜单按钮-的输入组" class="headerlink" title="带有 下拉菜单按钮 的输入组"></a>带有 下拉菜单按钮 的输入组</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span></span><br><span class="line">  <span class="selector-tag">form</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.row</span></span><br><span class="line">      <span class="selector-tag">div</span><span class="selector-class">.input-group</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.input-group-btn</span></span><br><span class="line">            <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-default</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[type=button]</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">                &#123;下拉菜单&#125;</span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.caret</span></span><br><span class="line">            <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span></span><br><span class="line">                li&gt;<span class="selector-tag">a</span></span><br><span class="line">                li&gt;<span class="selector-tag">a</span></span><br><span class="line">------------------</span><br><span class="line"><span class="selector-tag">div</span>.input-group&gt;<span class="selector-tag">div</span>.input-group-btn</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g17wjbvbwlj306t02bglg.jpg" alt="img"><h4 id="导航元素"><a href="#导航元素" class="headerlink" title="导航元素"></a>导航元素</h4><h5 id="标签式导航菜单"><a href="#标签式导航菜单" class="headerlink" title="标签式导航菜单"></a>标签式导航菜单</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.container</span></span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-tabs</span></span><br><span class="line">        <span class="selector-tag">li</span><span class="selector-class">.active</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#home]</span>&#123;首页&#125;</span><br><span class="line">        li&gt;<span class="selector-tag">a</span><span class="selector-attr">[data-toggle=tab]</span><span class="selector-attr">[href=#menu1]</span>&#123;菜单<span class="number">1</span>&#125;</span><br><span class="line">        li&gt;<span class="selector-tag">a</span><span class="selector-attr">[data-toggle=tab]</span><span class="selector-attr">[href=#menu2]</span>&#123;菜单<span class="number">2</span>&#125;</span><br><span class="line">        ...</span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.tab-content</span></span><br><span class="line">        div<span class="selector-id">#home</span><span class="selector-class">.tab-pane</span><span class="selector-class">.fade</span><span class="selector-class">.in</span><span class="selector-class">.active</span></span><br><span class="line">            h3&#123;首页&#125;</span><br><span class="line">            p&#123;一堆话&#125;</span><br><span class="line">        div<span class="selector-id">#menu1</span><span class="selector-class">.tab-pane</span><span class="selector-class">.fade</span></span><br><span class="line">            h3&#123;菜单<span class="number">1</span>&#125;</span><br><span class="line">            p&#123;有一堆话&#125;</span><br><span class="line">-------------</span><br><span class="line">fade  内容逐渐消失</span><br><span class="line"><span class="keyword">in</span>    初始化时，tab-pane显示的内容</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g180v4nyvlj30aw031jr9.jpg" alt="img"><h5 id="胶囊式导航菜单"><a href="#胶囊式导航菜单" class="headerlink" title="胶囊式导航菜单"></a>胶囊式导航菜单</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.container</span></span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-pills</span></span><br><span class="line">        <span class="selector-tag">li</span><span class="selector-class">.active</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[data-toggle=pill]</span><span class="selector-attr">[href=#home]</span>&#123;主页&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[data-toggle=pill]</span><span class="selector-attr">[href=#menu1]</span>&#123;菜单<span class="number">1</span>&#125;</span><br><span class="line">        ...</span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.tab-content</span></span><br><span class="line">        div<span class="selector-id">#home</span><span class="selector-class">.tab-pane</span><span class="selector-class">.fade</span><span class="selector-class">.in</span><span class="selector-class">.active</span></span><br><span class="line">            h3&#123;首页&#125;</span><br><span class="line">            p&#123;一堆话&#125;</span><br><span class="line">        div<span class="selector-id">#menu1</span><span class="selector-class">.tab-pane</span><span class="selector-class">.fade</span></span><br><span class="line">            h3&#123;菜单<span class="number">1</span>&#125;</span><br><span class="line">            p&#123;又一堆话&#125;</span><br><span class="line">-------------</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-pills</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-toggle=pill]</span><span class="selector-attr">[href=#home]</span></span><br><span class="line">-------------</span><br><span class="line">#垂直的胶囊式导航菜单 </span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-pills</span>.nav-stacked</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g17x4cb7enj309m01at8i.jpg" alt="img"> <img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g17x76rx5qj30bo05jwec.jpg" alt="img"><h5 id="两端对齐的导航"><a href="#两端对齐的导航" class="headerlink" title="两端对齐的导航"></a>两端对齐的导航</h5><figure class="highlight asciidoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">ul.nav.nav-tabs.nav-justified</span></span><br><span class="line"><span class="section">----------------------</span></span><br><span class="line"><span class="section">ul.nav.nav-pills.nav-justified</span></span><br><span class="line"><span class="section">----------------------</span></span><br><span class="line">在屏幕宽度大于768px时，表现为 ul.nav.nav-tabs;</span><br><span class="line">小于时，表现为 ul.nav.nav-tabs.nav-stacked</span><br></pre></td></tr></table></figure><h5 id="禁用链接"><a href="#禁用链接" class="headerlink" title="禁用链接"></a>禁用链接</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span><span class="selector-class">.disabled</span>   </span><br><span class="line"><span class="selector-class">.disable</span> 只会改变外观,不会改变功能,s需要自定义js来禁用链接</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g17xenlmjxj30cg01at8j.jpg" alt="img"><h5 id="导航菜单里有下拉菜单"><a href="#导航菜单里有下拉菜单" class="headerlink" title="导航菜单里有下拉菜单"></a>导航菜单里有下拉菜单</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-tabs</span></span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-class">.active</span></span><br><span class="line">        <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;HOME&#125;</span><br><span class="line">    <span class="selector-tag">li</span></span><br><span class="line">        <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;SVN&#125;</span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-class">.dropdown</span></span><br><span class="line">        <span class="selector-tag">a</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[data-toggle=dropdown]</span><span class="selector-attr">[href=#]</span></span><br><span class="line">            &#123;Java&#125;</span><br><span class="line">            <span class="selector-tag">span</span><span class="selector-class">.caret</span></span><br><span class="line">        <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span></span><br><span class="line">            <span class="selector-tag">li</span></span><br><span class="line">                <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;Swing&#125;</span><br><span class="line">            <span class="selector-tag">li</span></span><br><span class="line">                <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;jMeter&#125;</span><br><span class="line">    <span class="selector-tag">li</span></span><br><span class="line">        ...</span><br><span class="line">--------------------------</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.dropdown</span></span><br><span class="line">    <span class="selector-tag">a</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">    <span class="selector-tag">li</span>.dropdown-menu</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g17xnkfrskj30bw04ajrb.jpg" alt="img"><h4 id="导航栏"><a href="#导航栏" class="headerlink" title="导航栏"></a>导航栏</h4><h5 id="默认的导航栏"><a href="#默认的导航栏" class="headerlink" title="默认的导航栏"></a>默认的导航栏</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span><span class="selector-class">.navbar</span><span class="selector-class">.navbar-default</span><span class="selector-attr">[role=navigation]</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.container-fluid</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.navbar-header</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-class">.navbar-brand</span><span class="selector-attr">[href=#]</span>&#123;HEADER&#125;</span><br><span class="line">        <span class="selector-tag">div</span></span><br><span class="line">            <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.navbar-nav</span></span><br><span class="line">                <span class="selector-tag">li</span><span class="selector-class">.actice</span></span><br><span class="line">                    <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;IOS&#125;</span><br><span class="line">                li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;SVN&#125;</span><br><span class="line">                <span class="selector-tag">li</span><span class="selector-class">.dropdown</span></span><br><span class="line">                    <span class="selector-tag">a</span><span class="selector-class">.dropdown-toggle</span><span class="selector-attr">[href=@=#]</span><span class="selector-attr">[data-toggle=dropdown]</span></span><br><span class="line">                        Java</span><br><span class="line">                        <span class="selector-tag">b</span><span class="selector-class">.caret</span></span><br><span class="line">                    <span class="selector-tag">ul</span><span class="selector-class">.dropdown-menu</span></span><br><span class="line">                        li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;jmeter&#125;</span><br><span class="line">                        li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;EJB&#125;</span><br><span class="line">---------------------</span><br><span class="line"><span class="selector-tag">nav</span><span class="selector-class">.navbar</span><span class="selector-class">.navbar-default</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.navbar-header</span></span><br><span class="line">        <span class="selector-tag">a</span><span class="selector-class">.navbar-brand</span></span><br><span class="line">    <span class="selector-tag">div</span></span><br><span class="line">        <span class="selector-tag">ul</span><span class="selector-class">.nav</span>.navbar-nav</span><br></pre></td></tr></table></figure><p><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g18581tr2yj309g01ldfm.jpg" alt="img"><br><br><img src="//tva3.sinaimg.cn/large/005zbIM7gy1g185ytfernj30al03ljr7.jpg" alt="img"></p><h5 id="响应式的导航栏-小于一定宽度-右上角出现汉堡按钮"><a href="#响应式的导航栏-小于一定宽度-右上角出现汉堡按钮" class="headerlink" title="响应式的导航栏(小于一定宽度,右上角出现汉堡按钮)"></a>响应式的导航栏(小于一定宽度,右上角出现汉堡按钮)</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span><span class="selector-class">.navbar</span><span class="selector-class">.navbar-default</span></span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.container-fluid</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.navbar-header</span></span><br><span class="line">        <span class="selector-tag">button</span><span class="selector-class">.navbar-toggle</span><span class="selector-attr">[data-toggle=collapse]</span><span class="selector-attr">[data-target=#example-navbar-collapse]</span><span class="selector-attr">[type=button]</span></span><br><span class="line">            <span class="selector-tag">span</span>.sr-only&#123;切换导航&#125;</span><br><span class="line">            <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">            <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">            <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">        <span class="selector-tag">a</span><span class="selector-class">.navbar-brand</span><span class="selector-attr">[href=#]</span>&#123;HEADER&#125;</span><br><span class="line">    div<span class="selector-id">#example-navbar-collapse</span><span class="selector-class">.collapse</span><span class="selector-class">.navbar-collapse</span></span><br><span class="line">        <span class="selector-tag">ul</span> ..</span><br><span class="line">            <span class="selector-tag">li</span> .... 同上</span><br></pre></td></tr></table></figure><p><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g185v5j8eoj30dj017mwy.jpg" alt="img"><br><br><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g1869mf6pij30d801p3ya.jpg" alt="img"></p><h5 id="导航中的表单、按钮"><a href="#导航中的表单、按钮" class="headerlink" title="导航中的表单、按钮"></a>导航中的表单、按钮</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span><span class="selector-class">.navbar</span><span class="selector-class">.navbar-default</span><span class="selector-attr">[role=navigation]</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.container-fluid</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.navbar-header</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-class">.navbar-barand</span><span class="selector-attr">[href=#]</span>&#123;HEADER&#125;</span><br><span class="line">        <span class="selector-tag">div</span></span><br><span class="line">            <span class="selector-tag">form</span><span class="selector-class">.navbar-form</span><span class="selector-class">.navbar-left</span><span class="selector-attr">[role=search]</span></span><br><span class="line">                <span class="selector-tag">div</span><span class="selector-class">.form-group</span></span><br><span class="line">                    <span class="selector-tag">input</span><span class="selector-class">.form-control</span><span class="selector-attr">[type=text]</span><span class="selector-attr">[placeholder=Search]</span></span><br><span class="line">                <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-default</span>.submit&#123;提交&#125;</span><br><span class="line">            <span class="selector-tag">button</span><span class="selector-class">.btn</span><span class="selector-class">.btn-primary</span><span class="selector-class">.navbar-btn</span><span class="selector-attr">[type=button]</span>&#123;导航栏-按钮&#125;</span><br><span class="line">        <span class="selector-tag">div</span></span><br><span class="line">            <span class="selector-tag">p</span>.navbar-text&#123;导航栏-文本&#125;</span><br></pre></td></tr></table></figure><p><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g187cj3w3yj30gq01z3ye.jpg" alt="img"><br><br><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g187cvni9hj30gh068q2w.jpg" alt="img"></p><h5 id="导航链接"><a href="#导航链接" class="headerlink" title="导航链接"></a>导航链接</h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">汉堡图标!</span><br><span class="line"><span class="selector-tag">nav</span><span class="selector-class">.navbar</span><span class="selector-class">.navbar-default</span><span class="selector-attr">[role=navigation]</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-class">.container-fluid</span></span><br><span class="line">        <span class="selector-tag">div</span><span class="selector-class">.navbar-header</span></span><br><span class="line">            <span class="selector-tag">button</span><span class="selector-class">.navbar-toggle</span><span class="selector-attr">[data-toggle=collapse]</span><span class="selector-attr">[data-target=#example-collapse]</span><span class="selector-attr">[type=button]</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">                <span class="selector-tag">span</span><span class="selector-class">.icon-bar</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-class">.navbar-brand</span><span class="selector-attr">[href=#]</span>&#123;菜鸟教程&#125;</span><br><span class="line">        div<span class="selector-id">#example-collapse</span><span class="selector-class">.collapse</span><span class="selector-class">.navbar-collapse</span></span><br><span class="line">            <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.navbar-nav</span><span class="selector-class">.navbar-right</span></span><br><span class="line">                li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span></span><br><span class="line">                    <span class="selector-tag">span</span><span class="selector-class">.glyphicon</span><span class="selector-class">.glyphicon-user</span></span><br><span class="line">                    &#123;注册｝</span><br><span class="line">                li&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span></span><br><span class="line">                    <span class="selector-tag">span</span><span class="selector-class">.glyphicon</span><span class="selector-class">.glyphicon-log-in</span></span><br><span class="line">                    &#123;登录&#125;</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g190svqisoj30e201fq2p.jpg" alt="img"> <img src="//tva3.sinaimg.cn/large/005zbIM7ly1g190shreagj30e303aweb.jpg" alt="img"><h5 id="组件定位方式"><a href="#组件定位方式" class="headerlink" title="组件定位方式"></a>组件定位方式</h5><figure class="highlight dust"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">nav.nav.navbar-default</span></span><br><span class="line"><span class="xml">    div.contaoner-fluid</span></span><br><span class="line"><span class="xml">        div.navbar-header</span></span><br><span class="line"><span class="xml">            a.navbar-brand[href=#]</span><span class="template-variable">&#123;HEADER&#125;</span><span class="xml"></span></span><br><span class="line"><span class="xml">        div</span></span><br><span class="line"><span class="xml">            <span class="comment">&lt;!--向左对齐--&gt;</span></span></span><br><span class="line"><span class="xml">            ul.nav.navbar-nav.navbar-left</span></span><br><span class="line"><span class="xml">                li...</span></span><br><span class="line"><span class="xml">                ...</span></span><br><span class="line"><span class="xml">            form.navbar-form.navbar-left</span></span><br><span class="line"><span class="xml">                button...</span></span><br><span class="line"><span class="xml">            p.navbar-text.navbar-left</span><span class="template-variable">&#123;向左对齐&#125;</span><span class="xml"></span></span><br><span class="line"><span class="xml">            <span class="comment">&lt;!--向右对齐--&gt;</span></span></span><br><span class="line"><span class="xml">            ul.nav.navbar-nav.navbar-right</span></span><br><span class="line"><span class="xml">            ....</span></span><br><span class="line"><span class="xml">            form....</span></span><br><span class="line"><span class="xml">            p.....</span></span><br><span class="line"><span class="xml">=========================</span></span><br><span class="line"><span class="xml">.navbar-left    .navbar-right</span></span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1914rtckcj30j6016wee.jpg" alt="img"><h5 id="导航栏固定到顶部、底部、反色"><a href="#导航栏固定到顶部、底部、反色" class="headerlink" title="导航栏固定到顶部、底部、反色"></a>导航栏固定到顶部、底部、反色</h5><p>?<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1918cg271j30f001d74a.jpg" alt="img"><br></p><figure class="highlight asciidoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">body[style=padding=50px]</span><br><span class="line"><span class="code">    nav.navbar.navbar-inverse.navbar-fixed-top</span></span><br><span class="line"><span class="code">        div.container-fluid</span></span><br><span class="line"><span class="section">            ...</span></span><br><span class="line"><span class="section">------------</span></span><br><span class="line">navbar-fixed-top  固定在页面顶部(随着页面滚动)</span><br><span class="line">navbar-fixed-bottom   固定在页面底部(随着页面滚动)</span><br><span class="line">navbar-static-top   静态的顶部(不需要padding , 默认为此样式？)</span><br><span class="line">navbar-inverse || navbar-default   </span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7gy1g192gwoiqgj30fc02fdfs.jpg" alt="img"><h4 id="面包屑导航"><a href="#面包屑导航" class="headerlink" title="面包屑导航"></a>面包屑导航</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">css</span><br><span class="line">js</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.breadcrumb</span></span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;Home&#125;</span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;<span class="number">2019</span>&#125;</span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-class">.active</span>&#123;十一月&#125;</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1f4jv8hv6j30ay01dwe9.jpg" alt="img"><h4 id="分页"><a href="#分页" class="headerlink" title="分页"></a>分页</h4><h5 id="分页-Pagination"><a href="#分页-Pagination" class="headerlink" title="分页(Pagination)"></a>分页(Pagination)</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">css</span><br><span class="line">js</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.pagination</span></span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;&amp;laquo;&#125;</span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-attr">[class=active]</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;<span class="number">1</span>&#125;</span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-attr">[class=disabled]</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;<span class="number">2</span>&#125;</span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;<span class="number">3</span>&#125;</span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;<span class="number">4</span>&#125;</span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;<span class="number">5</span>&#125;</span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;&amp;raquo;&#125;</span><br><span class="line">----</span><br><span class="line">pagination   pagination-lg   pagination-sm  大小</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.active</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.disabled</span></span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1f4rgyo9xj307e01mq2p.jpg" alt="img"><h5 id="翻页-Pager"><a href="#翻页-Pager" class="headerlink" title="翻页(Pager)"></a>翻页(Pager)</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.pager</span></span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-class">.previous</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;&amp;larr;Older&#125;</span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-class">.next</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;New&amp;rarr;&#125;</span><br><span class="line">    <span class="selector-tag">li</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=<span class="string">&quot;#&quot;</span>]</span>&#123;active&#125;</span><br><span class="line">    <span class="selector-tag">li</span><span class="selector-class">.disabled</span>&gt;<span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;disabled&#125;</span><br><span class="line">----------</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.previous</span>   <span class="selector-tag">li</span><span class="selector-class">.next</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.disabled</span></span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7gy1g1f50p82rkj30ch014a9v.jpg" alt="img"><h4 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h4><figure class="highlight delphi"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">h4<span class="comment">&#123;Example Heading&#125;</span>&gt;span.<span class="keyword">label</span>.<span class="keyword">label</span>-<span class="keyword">default</span><span class="comment">&#123;Label&#125;</span></span><br><span class="line">span.<span class="keyword">label</span>.<span class="keyword">label</span>-<span class="keyword">default</span><span class="comment">&#123;默认标签&#125;</span></span><br><span class="line">span.<span class="keyword">label</span>.<span class="keyword">label</span>-primary<span class="comment">&#123;主要标签&#125;</span></span><br><span class="line">span.<span class="keyword">label</span>.<span class="keyword">label</span>-success<span class="comment">&#123;成功标签&#125;</span></span><br><span class="line">span.<span class="keyword">label</span>.<span class="keyword">label</span>-info<span class="comment">&#123;信息标签&#125;</span></span><br><span class="line">span.<span class="keyword">label</span>.<span class="keyword">label</span>-warning<span class="comment">&#123;警告标签&#125;</span></span><br><span class="line">span.<span class="keyword">label</span>.<span class="keyword">label</span>-danger<span class="comment">&#123;危险标签&#125;</span></span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/large/005zbIM7gy1g1f54z6ymmj30c001z0sp.jpg" alt="img"><h4 id="徽章-相较于标签，边角更加圆滑"><a href="#徽章-相较于标签，边角更加圆滑" class="headerlink" title="徽章(相较于标签，边角更加圆滑)"></a>徽章(相较于标签，边角更加圆滑)</h4><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">h4&#123;胶囊式导航中的激活状态&#125;</span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-pills</span></span><br><span class="line">        <span class="selector-tag">li</span><span class="selector-class">.active</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;首页&#125;&gt;<span class="selector-tag">span</span>.badge&#123;<span class="number">42</span>&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;简介&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;消息&#125;&gt;<span class="selector-tag">span</span>.badge&#123;<span class="number">3</span>&#125;</span><br><span class="line">h4&#123;列表导航中的激活状态&#125;</span><br><span class="line">    <span class="selector-tag">ul</span><span class="selector-class">.nav</span><span class="selector-class">.nav-pills</span><span class="selector-class">.nav-stacked</span></span><br><span class="line">        <span class="selector-tag">li</span><span class="selector-class">.active</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;首页&#125;&gt;<span class="selector-tag">span</span><span class="selector-class">.badge</span>.pull-<span class="attribute">right</span>&#123;<span class="number">42</span>&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;简介&#125;</span><br><span class="line">        <span class="selector-tag">li</span></span><br><span class="line">            <span class="selector-tag">a</span><span class="selector-attr">[href=#]</span>&#123;消息&#125;&gt;<span class="selector-tag">span</span><span class="selector-class">.badge</span><span class="selector-class">.pull-right</span></span><br><span class="line">-----</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.badge</span>  空时自动折叠</span><br></pre></td></tr></table></figure><img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g1g9mqirimj306y05qq2x.jpg" alt="img"><h4 id="页面标题与子标题"><a href="#页面标题与子标题" class="headerlink" title="页面标题与子标题"></a>页面标题与子标题</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.page-header</span></span><br><span class="line">    <span class="selector-tag">h1</span>&#123;页面标题实例&#125;</span><br><span class="line">        small&#123;子标题&#125;</span><br><span class="line"><span class="selector-tag">p</span>&#123;示例文本。。。。。。&#125;</span><br></pre></td></tr></table></figure><h4 id="缩略图"><a href="#缩略图" class="headerlink" title="缩略图"></a>缩略图</h4></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------end-------------</div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/Web/" rel="tag"><i class="fa fa-tag"></i> Web</a> <a href="/tags/Bootstrap/" rel="tag"><i class="fa fa-tag"></i> Bootstrap</a> <a href="/tags/W3School/" rel="tag"><i class="fa fa-tag"></i> W3School</a></div><div class="post-nav"><div class="post-nav-item"><a href="/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/python-%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1-2-%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90%E5%9F%BA%E7%A1%80/" rel="prev" title="1.2 数据分析基础"><i class="fa fa-chevron-left"></i> 1.2 数据分析基础</a></div><div class="post-nav-item"><a href="/categories/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0-%E6%90%AC/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/4-dhcp%E4%B8%8Epxe%EF%BC%9Aip%E6%98%AF%E6%80%8E%E4%B9%88%E6%9D%A5%E7%9A%84%EF%BC%8C%E5%8F%88%E6%98%AF%E6%80%8E%E4%B9%88%E6%B2%A1%E7%9A%84/" rel="next" title="4, DHCP与PXE：IP是怎么来的，又是怎么没的">4, DHCP与PXE：IP是怎么来的，又是怎么没的 <i class="fa fa-chevron-right"></i></a></div></div></footer></article></div><div class="comments"><script src="https://utteranc.es/client.js" repo="linxiaoki/comments" issue-term="pathname" theme="github-light" crossorigin="anonymous" async></script></div><script>window.addEventListener("tabs:register",()=>{let{activeClass:e}=CONFIG.comments;if(CONFIG.comments.storage&&(e=localStorage.getItem("comments_active")||e),e){let t=document.querySelector(`a[href="#comment-${e}"]`);t&&t.click()}}),CONFIG.comments.storage&&window.addEventListener("tabs:click",t=>{t.target.matches(".tabs-comment .tab-content .tab-pane")&&(t=t.target.classList[1],localStorage.setItem("comments_active",t))})</script></div><div class="toggle sidebar-toggle"><span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span></div><aside class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc">文章目录</li><li class="sidebar-nav-overview">站点概览</li></ul><div class="post-toc-wrap sidebar-panel"><div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87"><span class="nav-number">1.</span> <span class="nav-text">字体图标</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%BE%9D%E8%B5%96%E6%96%87%E4%BB%B6"><span class="nav-number">1.1.</span> <span class="nav-text">依赖文件</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E5%88%97%E8%A1%A8"><span class="nav-number">1.2.</span> <span class="nav-text">字体图标列表</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%94%A8%E6%B3%95"><span class="nav-number">1.3.</span> <span class="nav-text">用法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AE%9E%E4%BE%8B-%E5%B8%A6%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">1.4.</span> <span class="nav-text">实例-带字体图标的导航栏</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8C%89%E9%92%AE%E7%BB%84"><span class="nav-number">2.</span> <span class="nav-text">按钮组</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B5%8C%E5%A5%97"><span class="nav-number">2.1.</span> <span class="nav-text">嵌套</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%8C%89%E9%92%AE%E6%8F%92%E4%BB%B6-%E5%AE%9E%E7%8E%B0%E4%B8%8D%E5%90%8C%E6%95%88%E6%9E%9C"><span class="nav-number">2.2.</span> <span class="nav-text">按钮插件-实现不同效果</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8C%89%E9%92%AE%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95"><span class="nav-number">3.</span> <span class="nav-text">按钮下拉菜单</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%88%86%E5%89%B2%E7%9A%84%E6%8C%89%E9%92%AE%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95"><span class="nav-number">3.1.</span> <span class="nav-text">分割的按钮下拉菜单</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%8C%89%E9%92%AE%E4%B8%8A%E6%8B%89%E8%8F%9C%E5%8D%95"><span class="nav-number">3.2.</span> <span class="nav-text">按钮上拉菜单</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BE%93%E5%85%A5%E6%A1%86%E7%BB%84"><span class="nav-number">4.</span> <span class="nav-text">输入框组</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%E7%BB%84-%E5%89%8D%E7%BC%80%E4%B8%8E%E5%90%8E%E7%BC%80"><span class="nav-number">4.1.</span> <span class="nav-text">基本的输入框组(前缀与后缀)</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%BE%93%E5%85%A5%E6%A1%86%E7%BB%84%E5%A4%A7%E5%B0%8F"><span class="nav-number">4.2.</span> <span class="nav-text">输入框组大小</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%A6%E6%9C%89-%E5%A4%8D%E9%80%89%E6%A1%86%E5%92%8C%E5%8D%95%E9%80%89%E6%8F%92%E4%BB%B6-%E7%9A%84%E8%BE%93%E5%85%A5%E7%BB%84"><span class="nav-number">4.3.</span> <span class="nav-text">带有 复选框和单选插件 的输入组</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%A6%E6%9C%89-%E6%8C%89%E9%92%AE%E6%8F%92%E4%BB%B6-%E7%9A%84%E8%BE%93%E5%85%A5%E7%BB%84"><span class="nav-number">4.4.</span> <span class="nav-text">带有 按钮插件 的输入组</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%A6%E6%9C%89-%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E6%8C%89%E9%92%AE-%E7%9A%84%E8%BE%93%E5%85%A5%E7%BB%84"><span class="nav-number">4.5.</span> <span class="nav-text">带有 下拉菜单按钮 的输入组</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E5%85%83%E7%B4%A0"><span class="nav-number">5.</span> <span class="nav-text">导航元素</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E5%BC%8F%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95"><span class="nav-number">5.1.</span> <span class="nav-text">标签式导航菜单</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%83%B6%E5%9B%8A%E5%BC%8F%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95"><span class="nav-number">5.2.</span> <span class="nav-text">胶囊式导航菜单</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%E7%9A%84%E5%AF%BC%E8%88%AA"><span class="nav-number">5.3.</span> <span class="nav-text">两端对齐的导航</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%A6%81%E7%94%A8%E9%93%BE%E6%8E%A5"><span class="nav-number">5.4.</span> <span class="nav-text">禁用链接</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95%E9%87%8C%E6%9C%89%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95"><span class="nav-number">5.5.</span> <span class="nav-text">导航菜单里有下拉菜单</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">6.</span> <span class="nav-text">导航栏</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E9%BB%98%E8%AE%A4%E7%9A%84%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">6.1.</span> <span class="nav-text">默认的导航栏</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E5%AF%BC%E8%88%AA%E6%A0%8F-%E5%B0%8F%E4%BA%8E%E4%B8%80%E5%AE%9A%E5%AE%BD%E5%BA%A6-%E5%8F%B3%E4%B8%8A%E8%A7%92%E5%87%BA%E7%8E%B0%E6%B1%89%E5%A0%A1%E6%8C%89%E9%92%AE"><span class="nav-number">6.2.</span> <span class="nav-text">响应式的导航栏(小于一定宽度,右上角出现汉堡按钮)</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E4%B8%AD%E7%9A%84%E8%A1%A8%E5%8D%95%E3%80%81%E6%8C%89%E9%92%AE"><span class="nav-number">6.3.</span> <span class="nav-text">导航中的表单、按钮</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E9%93%BE%E6%8E%A5"><span class="nav-number">6.4.</span> <span class="nav-text">导航链接</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F"><span class="nav-number">6.5.</span> <span class="nav-text">组件定位方式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E6%A0%8F%E5%9B%BA%E5%AE%9A%E5%88%B0%E9%A1%B6%E9%83%A8%E3%80%81%E5%BA%95%E9%83%A8%E3%80%81%E5%8F%8D%E8%89%B2"><span class="nav-number">6.6.</span> <span class="nav-text">导航栏固定到顶部、底部、反色</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%9D%A2%E5%8C%85%E5%B1%91%E5%AF%BC%E8%88%AA"><span class="nav-number">7.</span> <span class="nav-text">面包屑导航</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%86%E9%A1%B5"><span class="nav-number">8.</span> <span class="nav-text">分页</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%88%86%E9%A1%B5-Pagination"><span class="nav-number">8.1.</span> <span class="nav-text">分页(Pagination)</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%BF%BB%E9%A1%B5-Pager"><span class="nav-number">8.2.</span> <span class="nav-text">翻页(Pager)</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE"><span class="nav-number">9.</span> <span class="nav-text">标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BE%BD%E7%AB%A0-%E7%9B%B8%E8%BE%83%E4%BA%8E%E6%A0%87%E7%AD%BE%EF%BC%8C%E8%BE%B9%E8%A7%92%E6%9B%B4%E5%8A%A0%E5%9C%86%E6%BB%91"><span class="nav-number">10.</span> <span class="nav-text">徽章(相较于标签，边角更加圆滑)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A1%B5%E9%9D%A2%E6%A0%87%E9%A2%98%E4%B8%8E%E5%AD%90%E6%A0%87%E9%A2%98"><span class="nav-number">11.</span> <span class="nav-text">页面标题与子标题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BC%A9%E7%95%A5%E5%9B%BE"><span class="nav-number">12.</span> <span class="nav-text">缩略图</span></a></li></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" alt="我的名字" src="/images/avatar.gif"><p class="site-author-name" itemprop="name">我的名字</p><div class="site-description" itemprop="description">一起滚月球吧·</div></div><div class="site-state-wrap motion-element"><nav class="site-state"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">84</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/"><span class="site-state-item-count">39</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/"><span class="site-state-item-count">62</span> <span class="site-state-item-name">标签</span></a></div></nav></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/linxiaoki" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;linxiaoki" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a></span></div></div><div class="back-to-top motion-element"><i class="fa fa-arrow-up"></i> <span>0%</span></div></div></aside><div id="sidebar-dimmer"></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright">&copy; <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="fa fa-user"></i> </span><span class="author" itemprop="copyrightHolder">我的名字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span title="站点总字数">174k</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-coffee"></i> </span><span title="站点阅读时长">2:38</span></div></div></footer></div><script color="0,134,139" opacity="0.6" zindex="22" count="199" src="/js/src/canvas-nest-nomobile.min.js"></script><script src="/lib/anime.min.js"></script><script src="//cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js"></script><script src="//cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js"></script><script src="/lib/velocity/velocity.min.js"></script><script src="/lib/velocity/velocity.ui.min.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script><script>var pjax=new Pjax({selectors:["head title","#page-configurations",".content-wrap",".post-toc-wrap",".languages","#pjax"],switches:{".post-toc-wrap":Pjax.switches.innerHTML},analytics:!1,cacheBust:!1,scrollTo:!CONFIG.bookmark.enable});window.addEventListener("pjax:success",()=>{document.querySelectorAll("script[data-pjax], script#page-configurations, #pjax script").forEach(e=>{var t=e.text||e.textContent||e.innerHTML||"",a=e.parentNode;a.removeChild(e);var s=document.createElement("script");e.id&&(s.id=e.id),e.className&&(s.className=e.className),e.type&&(s.type=e.type),e.src&&(s.src=e.src,s.async=!1),void 0!==e.dataset.pjax&&(s.dataset.pjax=""),""!==t&&s.appendChild(document.createTextNode(t)),a.appendChild(s)}),NexT.boot.refresh(),CONFIG.motion.enable&&NexT.motion.integrator.init().add(NexT.motion.middleWares.subMenu).add(NexT.motion.middleWares.postList).bootstrap(),NexT.utils.updateSidebarPosition()})</script><script src="/js/local-search.js"></script><div id="pjax"></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({model:{jsonPath:"/live2dw/assets/hijiki.model.json"},display:{position:"left",vOffset:-75,hOffset:10,width:200,height:385},mobile:!1,react:{opacity:.7},log:!1,pluginJsPath:"lib/",pluginModelPath:"assets/",pluginRootPath:"live2dw/",tagMode:!1})</script></body></html>